<script setup>
import { ref } from 'vue'
import Footer from '@/components/Footer/Footer.vue'

const handleFooterLinkClick = (link) => {
  console.log('Footer link clicked:', link)
  // 这里可以添加跳转逻辑，例如使用 router.push(link)
}

// 示例链接数组
const footerLinks = ref([
  { title: '关于我们', url: '/about' },
  { title: '联系我们', url: '/contact' },
  { title: '隐私政策', url: '/privacy' }
])
</script>

<template>
  <div>
    <h2>1. 基础用法</h2>
    <Footer
      text="© 2024 My Company. All rights reserved."
    />

    <h2>2. 带链接和自定义样式</h2>
    <Footer
      text="© 2024 Tech Corp"
      :links="footerLinks"
      backgroundColor="#2c3e50"
      textColor="#ecf0f1"
      padding="30px 20px"
      @link-click="handleFooterLinkClick"
    />

    <h2>3. 右对齐并处理链接点击事件</h2>
    <Footer
      text="© 2024 Creative Agency"
      :links="footerLinks"
      alignment="right"
      @link-click="handleFooterLinkClick"
    />

    <h2>4. 移动端隐藏</h2>
    <Footer
      text="© 2024 Mobile App"
      :hideOnMobile="true"
    />

    <h2>5. 完全自定义</h2>
    <Footer
      text="© 2024 Custom Solutions"
      :links="footerLinks"
      backgroundColor="linear-gradient(45deg, #ff6b6b, #4ecdc4)"
      textColor="#E94242"
      padding="40px 0"
      alignment="left"
    />
  </div>
</template>

<style scoped>
h2 {
  margin-top: 20px;
}
</style>